<template>
  <!-- 图片详情页面 -->
  <view>
    <view class="title" v-if="imgdata.id.length > 0">
      <image
        class="title_image"
        :src="imgdata.user.avatar"
        mode="widthFix"
        v-if="imgdata.user.avatar"
      ></image>
      <view class="auth_box">
        <view class="auth">{{ imgdata.user.name }}</view>
        <view>{{ imgdata.newtime }} </view>
      </view>
    </view>

    <!-- 头部 -->
    <!-- 此处使用自封滑动组件 -->
    <swiper-action @swiperaction="handleswiperaction">
      <image class="bigimg" :src="imgdata.thumb" mode="widthFix"></image
    ></swiper-action>
    <!-- 大图 -->
    <view class="dianzan_box">
      <view class="dianzan_list">
        <view class="dianzan iconfont icondianzan">{{ imgdata.rank }}</view>
        <view class="shoucang iconfont iconshoucang">收藏</view>
      </view>
    </view>

    <!--  点赞区-->
    <!-- 最热评论 -->
    <view class="comment hot" v-if="hot.length !== 0">
      <view class="comment_title">
        <text class="iconfont iconhot1"></text>
        <text class="conmeng_text">最热评论</text>
      </view>
      <view class="comment_list">
        <view class="coment_item" v-for="item in hot" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <view class="user_icon">
              <image :src="item.user.avatar" mode="widthFix"> </image>
            </view>
            <view class="user_name_box">
              <view class="user_name">{{ item.user.name }}</view>
              <view class="user_time">{{ item.atime }}</view>
            </view>
            <view
              class="user_hz"
              v-for="item2 in item.user.title"
              :key="item2.icon"
            >
              <image :src="item2.icon" v-if="item2.icon.length !== 0"></image>
            </view>
          </view>
          <!-- 评论信息 -->
          <view class="comment_desc">
            <view class="desc_text">{{ item.content }}</view>
            <view class="desc_dz iconfont icondianzan">{{ item.size }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最新评论 -->
    <view class="comment hot" v-if="comment.length !== 0">
      <view class="comment_title">
        <text class="iconfont iconpinglun"></text>
        <text class="conmeng_text">最新评论</text>
      </view>
      <view class="comment_list">
        <view class="coment_item" v-for="item in comment" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <view class="user_icon">
              <image :src="item.user.avatar" mode="widthFix"> </image>
            </view>
            <view class="user_name_box">
              <view class="user_name">{{ item.user.name }}</view>
              <view class="user_time">{{ item.atime }}</view>
            </view>
            <view
              class="user_hz"
              v-for="item2 in item.user.title"
              :key="item2.icon"
            >
              <image :src="item2.icon" v-if="item2.icon.length !== 0"></image>
            </view>
          </view>
          <!-- 评论信息 -->
          <view class="comment_desc">
            <view class="desc_text">{{ item.content }}</view>
            <view class="desc_dz iconfont icondianzan">{{ item.size }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最新评论结束 -->
     <!-- 下载图片开始 -->
     <view class="download">
        <view class="download_but" @click="handleDownload">下载图片</view>
     </view>
       <!-- 下载图片结束 -->
  </view>
</template>
<script>
import moment from "moment";
/* 设置日期语言为中文 */
moment.locale("zh-cn");
/* 导入手势滑动组件 */
import swiperAction from "@/components/swiperAction";

export default {
  components: {
    swiperAction
  },
  data() {
    return {
      imgdata: {},
      /* 专辑信息 */
      album: [],
      /* 最热评论 */
      hot: [],
      /* 最新评论 */
      comment: [],
      /* 图片索引 */
      index:0,
      /*  当前图片的ID*/
      imgID:""
    };
  },
  onLoad() {
    // console.log(getApp().globalData);
    const {imgIndex } = getApp().globalData;
    this.index = imgIndex;
    this.getList()
  },
  methods: {
       /* 给当前页面赋值 */
    getList() {
       const { imgList} = getApp().globalData;
      this.imgdata = imgList[this.index];
      // console.log(this.imgdata);

      /* 此处使用moment 日期库 */
      this.imgdata.newtime = moment(this.imgdata.atime * 1000).fromNow();
      this.getComment(this.imgdata.id);
    },
    async getComment(id) {
      const res = await this.http({
        url: `https://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment`
      });
      res.data.res.comment.forEach(
        v => (v.atime = moment(v.atime * 1000).fromNow())
      );
      this.album = res.data.res.album;
      this.hot = res.data.res.hot;
      this.comment = res.data.res.comment;
      // console.log(this.imgdata);
      // console.log(this.album);
      //  console.log(this.hot);
      //    console.log(this.comment);
    },
    handleswiperaction(e) {
     // console.log(e);
         const { imgList} = getApp().globalData;
      if (e.fangxiang === "left" && this.index < imgList.length - 1) {
        /* 左滑 */
        this.index++;
        this.getList()
        return
      }
      if (e.fangxiang === "right" && this.index > 0) {
        this.index--;
        /* 右滑 */
        this.getList()
        return
      } else {
        uni.showToast({
          title: "没有图片了",
          icon: "none"
        });
      }
    },
    /* 点击下载图片 */
  async handleDownload(){
     /* 拼接小尺寸图片路径 */
   // let c = this.imgdata.rule_new.replace(/\$<Width>/g,"360").replace(/\$<Height>/g,"360")
    // let rule = c.replace(/\$<Height>/g,"360")
     //  const imgUrl = this.imgdata.thumb + c
       /* 将图片下载到小程序内存中 */
   const res1 = await uni.downloadFile({
          url:this.imgdata.thumb
        })
       //console.log(res);
       const{ tempFilePath} = res1[1]
       /* 将内存中的图片下载到用户手机里 */
        await uni.showLoading({
          title:"下载中"
        })
       const res2 = await uni.saveImageToPhotosAlbum({
           filePath:tempFilePath
         })
       // console.log(res2);
         uni.hideLoading()
     if(res2[1].errMsg) {
          uni.showToast({
             title:"下载成功",
           })
       }
    }
 
    /*  */
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  margin: 30rpx;

  .title_image {
    border-radius: 50%;
    width: 88rpx;
    border-radius: 50%;
  }
  .auth_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
    font-size: 20rpx;
    color: #ccc;
    .auth {
      font-weight: 500;
      font-size: 28rpx;
      color: #000;
      margin-bottom: 10rpx;
    }
  }
}

.dianzan_box {
  height: 80rpx;
  border-bottom: 2px solid #eee;
  .dianzan_list {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 80rpx;
    color: #666;
  }
}

.comment {
  .comment_title {
    padding: 15rpx;
    text.iconfont.iconhot1 {
      color: red;
      font-style: 40prx;
    }

    .conmeng_text {
      font-weight: 600;
      font-size: 28rpx;
      color: #666;
      margin-left: 10rpx;
    }
  }
  .comment_list {
    padding: 20rpx;
    .coment_item {
      border-bottom: 5px solid #eee;

      .comment_user {
        display: flex;
        padding: 20rpx;

        .user_icon {
          width: 13%;
          margin-right: 15rpx;
          justify-content: space-between;
          align-items: center;
          img {
            width: 90%;
          }
        }

        .user_name_box {
          flex: 1;

          .user_name {
            margin-bottom: 10rpx;
            color: #777;
          }

          .user_time {
            color: #ccc;
            font-size: 24rpx;
            padding: 5rpx;
          }
        }

        .user_hz {
          image {
            width: 40rpx;
            height: 40rpx;
            display: inline-block;
            
          }
        }
      }

      .comment_desc {
        display: flex;
        padding: 30rpx 0;
        .desc_text {
          flex: 1;
          padding-left: 15%;
          color: #000;
        }

        .desc_dz {
          text-align: right;
        }
      }
    }
  }
}
.iconpinglun {
  color: aqua !important;
}
.download {
  width: 100%;
  height: 120rpx;
  padding: 20rpx 10rpx;
 
  display: flex;
  .download_but {
      flex: 1;
      background-color: $color;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      color: #eee;
      font-weight: 600;
  }
}
</style>